<template>
  <view class="tp-list-card">
    <view class="tp-list-item" v-for="(item, idx) in items" @click="handleItemClick(item)" :key="'tp-l-i-' + idx">
      <view class="content">
        <view class="icon">
          <ai-icon v-if="item.icon" :type="item.icon"></ai-icon>
        </view>
        <text class="title">{{item.title}}</text>
      </view>
      <ai-icon type="icon-right" color="var(--gray-3)" v-if="item.right"></ai-icon>
    </view>
  </view>
</template>

<script>
  export default {
    name: "tp-list-card",
    emits: ['itemClick'],
    props: {
      items: {
        type: Array,
        default: []
      }
    },
    data() {
      return {

      };
    },
    methods: {
      handleItemClick(item) {
        this.$emit("itemClick", item)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .tp-list-card {
    box-shadow: var(--shadow-2);
    padding: $card-padding;
    background-color: $card-bg;
    overflow: hidden;
    border-radius: $card-border-radius;
    color: $card-text-color;
    
    .tp-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: $gutter 0;
      border-bottom: 1px solid var(--gray-7);
      .content {
        display: flex;
        align-items: center;
        
        .icon {
          margin-right: $gutter;
        }
      }
      
      &:first-child {
        padding-top: 0;
      }
      
      &:last-child {
        border-bottom-color: transparent;
        padding-bottom: 0;
      }
    }
  }
</style>